<script setup>
import {ref, onMounted} from "vue";
import {readInventory, updateInventory} from "@/apis/inventory"
import {useRoute} from "vue-router"
import SelectComponent from "@/components/Material/SelectComponent.vue";
import {Message} from "tdesign-mobile-vue";

const step = ref(1);
const route = useRoute();
const stepsList = ref([
  {
    key: 0,
    title: "创建盘点单"
  }, {
    key: 1,
    title: "进行盘点"
  }, {
    key: 2,
    title: "盘点完成"
  },
])
const inventoryInfo = ref({
  title: '',
  warehouse: {
    name: ''
  },
  record_user: {
    profile: {
      name: ''
    }
  }
})
const materialList = ref([])
const selectShow = ref(false)
const isShowDialog = ref(false)

onMounted(() => {
  const id = route.params.id;
  readInventory(id)
      .then(res => {
        if (res.data.code === 1) {
          inventoryInfo.value = res.data.data;
        }
      })
})

function selectConfirm(item) {
  let find = false;
  materialList.value.forEach((el, index) => {
    if (el.id === item.id) {
      el.total = Number(el.total++)
      materialList.value[index] = el;
      find = true;
    }
  })
  if (find === false) {
    materialList.value.push(item)
  }
  selectShow.value = false
}

function deleteMaterial(index) {
  materialList.value.splice(index, 1);
}

function submitFunc() {
  const formData = {
    goods_list: materialList.value
  }
  updateInventory(route.params.id, formData)
      .then(res => {
        console.log(res.data)
        const {code, msg} = res.data;
        if (code === 1) {
          Message.success({
            content: "已提交盘点，请等待审批",
            context: document.querySelector('main'),
            offset: [8, 8]
          })
          step.value = 2
        } else {
          Message.error({
            content: msg,
            context: document.querySelector('main'),
            offset: [8, 8]
          })
        }
      })
}
</script>

<template>
  <main>
    <div class="steps-container">
      <t-steps :current="step">
        <t-step-item v-for="(item, index) in stepsList" :key="index" :title="item.title"/>
      </t-steps>
    </div>

    <template v-if="step === 1">
      <t-form label-width="130">
        <t-form-item label="标题">
          <t-input borderless readonly :value="inventoryInfo.title"/>
        </t-form-item>
        <t-form-item label="清点仓库">
          <t-input borderless readonly :value="inventoryInfo.warehouse.name"/>
        </t-form-item>
        <t-form-item label="记录人">
          <t-input borderless :value="inventoryInfo.record_user.profile.name" readonly/>
        </t-form-item>
      </t-form>

      <t-cell-group title="物品列表">
        <t-cell v-for="(item, index) in materialList" :key="item.id" :title="item.name" :image="item.cover_info.url">
          <template #description>
            <t-tag style="margin-bottom: 8px;">物品编码：{{ item.material_id }}</t-tag>
            <t-stepper v-model="item.total" :max="9999" theme="filled"/>
          </template>
          <template #rightIcon>
            <t-icon @click="deleteMaterial(index)" name="delete-1" style="color: red;"></t-icon>
          </template>
        </t-cell>
        <t-cell>
          <template #note>
            <t-icon @click="selectShow = true" size="30" name="add-circle"
                    style="margin-right: 8px;color: #535d6d;"/>
            <t-icon size="30" name="scan" style="color: #535d6d;"/>
          </template>
        </t-cell>
      </t-cell-group>

      <div style="margin: 8px;">
        <t-button type="submit" theme="primary" block @click="isShowDialog=true">保存</t-button>
      </div>

      <t-dialog
          v-model:visible="isShowDialog"
          title="危险操作"
          content="盘点单通过后将会覆写物资数量以及所属仓库属性，确定清点正确？"
          cancel-btn="取消"
          confirm-btn="确认"
          @confirm="submitFunc"
          @cancel="isShowDialog=false"
      >
      </t-dialog>

      <t-popup v-model="selectShow" placement="bottom">
        <div class="header">
          <div class="btn btn--cancel" @click="selectShow=false">
            <t-icon name="chevron-down"></t-icon>
          </div>
          <div class="title">请选择物品</div>
          <div class="btn btn--confirm" @click="selectShow=false"></div>
        </div>
        <SelectComponent @confirm="selectConfirm"/>
      </t-popup>
    </template>

    <template v-if="step===2">
      <div style="background-color: #fff;padding: 12px 0;">
        <t-result theme="success" title="盘点完成" description="盘点完成，请联系管理员审批" class="space"/>
      </div>
    </template>
  </main>
</template>

<style scoped lang="less">
.steps-container {
  padding: 6px;
}

.header {
  display: flex;
  align-items: center;
  height: 116rpx;
}

.title {
  flex: 1;
  text-align: center;
  font-weight: 600;
  font-size: 18px;
  color: var(--td-text-color-primary, rgba(0, 0, 0, 0.9));
}

.btn {
  font-size: 16px;
  padding: 16px;
}

.btn--cancel {
  color: var(--td-text-color-secondary, rgba(0, 0, 0, 0.6));
}

.btn--confirm {
  color: #0052d9;
  width: 20px;
  height: 20px;
}
</style>